<template>
	<view class="content">
		<view class="top">
			<view class="shadow">
			</view>
			<view class="top-main">
				<!-- <view style="width: 92rpx;height: 64rpx;"></view> -->
				<image style="width: 64rpx;height: 64rpx;" src="../../static/back.png"></image>
				<view>商学院</view>
				<view>客服</view>
			</view>
		</view>
		
		<view class="school-select">
			<block v-for="(item,index) in midList" :key="index">
				<text @click="tapSelect(index)" :class="selected==index?'tab-selected':'tab-unselect'">{{item}}</text>
			</block>
		</view>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				midList:['商学院','如何交易','邀请好友','如何提现'],
				selected:0
			}
		},
		onLoad() {

		},
		methods: {
			tapSelect(e){
				this.selected=e;
			}
		}
	}
</script>

<style>
	page{
		background: var(--color-fill-bg-light, #0C0C0C);
	}
	.top-main>view:nth-child(3){
		color: #FFC549;width: 92rpx;height: 64rpx;text-align: center;line-height: 64rpx;background: var(--color-fill-bg-grey, #1D1C21);
		border-radius: 32rpx;font-size: 30rpx;
	}
	.top-main>view:nth-child(2){
		color: white;font-size: 36rpx;
	}
	.top-main{
		width: 100%;;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 88rpx;height: 88rpx;
	}
	.shadow{
		width: 540rpx;height: 516rpx;background: radial-gradient(82.96% 86.82% at 32.96% 0%, #FFC549 0%, rgba(153, 118, 44, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
		position: absolute;top: -258rpx;left: -270rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top{
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.school-select{
		width: 90%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 15rpx 0;
	}
	.tab-selected{
		padding: 13rpx 17rpx;
		display: inline-block;
		border: 2rpx solid #FFC549;
		border-radius: 16rpx;
		font-size: 26rpx;
		color: #FFC549;
		margin-right: 15rpx;
	}
	.tab-unselect{
		padding: 13rpx 17rpx;
		display: inline-block;
		border: 2rpx solid #000000;
		font-size: 26rpx;
		color: #FFFFFFCC;
		margin-right: 15rpx;
	}
</style>
